<template>
  <view class="pen_item" v-for="(item, index) in penData" :key="index">
      <view>
          <!-- <image class="default_pen" src="../images/default_pen.png" /> -->
      </view>
      <view class="penItem_center">
          <text class="pen_text">{{item.nickName }}</text>
          <text class="isConnect">
            <text v-show="state.sn == item.deviceId">已连接</text>
            <text v-show="state.sn == item.deviceId && state.electricity"> ｜{{ state.electricity }} %电量</text> 
          </text>
      </view>
      <!-- 切换,删除 -->
      <button @click="emit('tabpen', item)" class="connect_btn">{{btnName}}</button>
  </view>
  </template>
  
  <script setup>
  import { useBluetoothStore } from '../store/blueTooth'
  const { 
    state, 
  } = useBluetoothStore()
  const props = defineProps(['penData','btnName', 'isconnect'])
  const emit = defineEmits(['tabpen'])

  // console.log('porps.penData:', porps.penData)


  // console.log('penListTab中的props:', props.penData)
  
  </script>
  
  <style>
    .pen_item {
      /* padding: 40px 32px; */
      padding: 40px 10px;
      border-radius: 20px;
      background-color: #FFF;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .default_pen{
      width: 136px;
      height: 136px;
    }
    .connect_btn {
      width: 128px;
      height: 80px;
      line-height: 80px;
      font-size: 30px;
      color: #FFF;
      text-align: center;
      background-color: #956F31;
      border-radius: 50px;
      display: inline-block;
    }
  
    .penItem_center{
      width: 57%;
      width: 65%;
      height: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
  
    .pen_text {
      width: 100%;
      max-width: 100%; /* 确保文字宽度不会超过容器 */
      font-family: 'siyuan';
      font-size: 40px;
      font-weight: bold;
      text-align: left;
      align-self: self-start;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  
    .isConnect {
      align-self: flex-start;
      color: #816747;
    }
  </style>